<template>
  <div class="menu-list">
    <template v-for="l in compData.data.list" :key="l">
      <div class="menu-item">
        <div class="sa-flex">
          <sa-image
            v-if="l.src"
            class="sa-m-r-10"
            :url="l.src"
            size="16"
            radius="0"
            :suffix="null"
          ></sa-image>
          <div class="title" :style="{ color: l.title.color }">
            {{ l.title.text }}
          </div>
        </div>
        <div class="sa-flex">
          <div class="tip" :style="{ color: l.tip.color }">
            {{ l.tip.text }}
          </div>
          <el-icon>
            <ArrowRight />
          </el-icon>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
  const props = defineProps(['compData']);
</script>

<style lang="scss" scoped>
  .menu-list {
    .menu-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 42px;
      padding: 0 12px;
      border-bottom: 1px solid #eee;
      &:last-of-type {
        border-bottom: none;
      }
      .title {
        font-size: 16px;
      }
      .tip {
        font-size: 12px;
      }
      .el-icon {
        font-size: var(--sa-subfont);
      }
    }
  }
</style>
